<template>
  <f7-page>
    <f7-navbar :title="$t('deviceInfo.title')" :back-link="$t('common.back')">
      <f7-nav-right>
        <f7-button @click="$refs.actionsOneGroup.open()"><f7-icon f7="more_fill" size="20px"></f7-icon></f7-button>
      </f7-nav-right>
    </f7-navbar>
    <f7-block-title>{{$t('common.information')}}</f7-block-title>
    <f7-list form>
      <f7-list-item>
        <f7-label>{{$t("common.imei")}}</f7-label>
        <f7-input type="text" :placeholder="$t('menu.addDevice.deviceIMEI')" :value="device.imei" @input="device.imei = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>{{$t("common.name")}}</f7-label>
        <f7-input type="text" :placeholder="$t('menu.addDevice.deviceName')" :value="device.name" @input="device.name = $event.target.value"></f7-input>
      </f7-list-item>

      <f7-list-item>
        <f7-label>{{$t("common.sim")}}</f7-label>
        <f7-input type="tel" :placeholder="$t('menu.addDevice.simNumber')" :value="device.sim" @input="device.sim = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>{{$t("common.type")}}</f7-label>
        <f7-input type="select" @input="device.typeId = Number($event.target.value)">
          <option :selected="device.typeId==type.id" :value="type.id" v-for="(type,index) in $store.state.dict.deviceTypes">{{type.name}}</option>
        </f7-input>
      </f7-list-item>
      <f7-list-item :title="$t('deviceInfo.driftSuppression')">
        <f7-toggle checked  slot="after"></f7-toggle>
      </f7-list-item>
      <f7-list-item>
        <f7-label>{{$t("deviceInfo.speedLimit")}} <f7-badge :color="device.speedLimit==0?'green':'orange'">{{device.speedLimit==0?'不限速':'限速'+device.speedLimit+'km/h'}}</f7-badge></f7-label>
        <f7-input>
          <f7-range min="0" max="300" :value="device.speedLimit" step="1" :label="true" @range:change="changeSpeedLimit"></f7-range>
        </f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>{{$t("common.remarks")}}</f7-label>
        <f7-input type="textarea" :placeholder="$t('common.information')"></f7-input>
      </f7-list-item>

    </f7-list>

    <f7-block>
      <f7-row tag="p">
        <f7-button class="col"  fill raised color="red" @click="handlerSave">{{$t('common.save')}}</f7-button>
        <f7-button class="col"  fill raised color="green">{{$t('common.reset')}}</f7-button>
      </f7-row>
    </f7-block>

    <!-- One Group -->
   <f7-actions ref="actionsOneGroup">
     <f7-actions-group>

       <f7-actions-button bold @click="deleteDevice">{{$t('common.delete')}}</f7-actions-button>
       <f7-actions-button color="red">{{$t('common.cancel')}}</f7-actions-button>
     </f7-actions-group>
   </f7-actions>

  </f7-page>
</template>

<script>
import { deleteDevice,updateDevice } from '@/api/api';
export default {
  data() {
			return {
				device:{
          name:''
        }
			}
		},
  methods:{
      deleteDevice(){
        let _this = this;
        this.$f7.dialog.confirm('你确定要删除该设备?', function () {
            deleteDevice(_this.$store.state.devices.selectId).then(data=>{
              _this.$f7.dialog.alert('删除成功!');
              _this.$store.dispatch('initDevices'); //初始化设备
              _this.$f7.views.main.router.back();
            });
         });

      },

      handlerSave(){
        let _this = this;
        this.$f7.dialog.confirm('你确定更改设备信息?', function () {
              console.log(_this.device);
              updateDevice(_this.device).then(data=>{
                _this.$f7.dialog.alert('更新成功!');
              });
         });

      },
      changeSpeedLimit(val){
        this.device.speedLimit = val;
      }
  },
  mounted() {
        if(this.$store.state.devices.selectId!=0){
          let index = this.$store.state.devices.index[this.$store.state.devices.selectId];
    			let device  =  this.$store.state.devices.list[index];
          this.device= device;
        }
		},
  computed: {

		}
}
</script>
